import { AnchorScroll } from './components'
import AnchorScrollItem from './components/AnchorScrollItem'

function App() {
    const tabs = ['测试', '测试数据2', '测试数据3', '测试4', '测试数据5', '数据6', '测试数据7']
    return (
        <div>
            <div id="container">
                <AnchorScroll containerId="container" initActiveKey={0} navbarProps={{ tabs, fixedStart: false }}>
                    <AnchorScrollItem>
                        <div style={{ height: '500px', background: '#2685c4' }}>标题1</div>
                    </AnchorScrollItem>
                    <AnchorScrollItem>
                        <div style={{ height: '500px', background: '#4cc960' }}>标题2</div>
                    </AnchorScrollItem>
                    <AnchorScrollItem>
                        <div style={{ height: '500px', background: '#db38c0' }}>标题3</div>
                    </AnchorScrollItem>
                    <AnchorScrollItem>
                        <div style={{ height: '500px', background: '#db3884' }}>标题4</div>
                    </AnchorScrollItem>
                    <AnchorScrollItem>
                        <div style={{ height: '500px', background: '#f7cc0c' }}>标题5</div>
                    </AnchorScrollItem>
                    <AnchorScrollItem>
                        <div style={{ height: '500px', background: '#4cee3e' }}>标题6</div>
                    </AnchorScrollItem>
                    <AnchorScrollItem>
                        <div style={{ height: '500px', background: '#eb8501' }}>标题7</div>
                    </AnchorScrollItem>
                </AnchorScroll>
            </div>
        </div>
    )
}

export default App
